<template>
  <div class="page">
    <div class="box">
      <h3>行情记录系统</h3>
      <el-input v-model="formData.name" placeholder="Please input name" />
      <el-input v-model="formData.passwrod" type="password" placeholder="Please input password" show-password />
      <el-button @click="login">登陆</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { loginUser } from '@/api/user'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    console.log(import.meta.env.MODE)
    const router = useRouter()
    const formData = reactive({
      name: '',
      passwrod: '',
    })
    async function login() {
      let data = await loginUser(`?name=${formData.name}&password=${formData.passwrod}`)
      if (data.state === 200) {
        router.push('/record')
        window.sessionStorage.setItem('data', formData.name)
      }
      console.log(data)
    }
    const value = ref(new Date())
    return {
      value,
      login,
      formData,
    }
  },
})
</script>

<style scoped lang="less">
.page {
  background-color: #ccc;
  height: calc(100vh);
  background-image: url(../assets/bgc.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
}
.box {
  color: #fff;
  width: 400px;
  text-align: center;
  padding: calc(30vh);
  row-gap: 10px;
  display: grid;
  margin: 0 auto;
}
</style>
